<%--
  Created by IntelliJ IDEA.
  User: Honphie.$.Won
  Date: 2023/6/29
  Time: 20:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增用户</title>
    <script src="./js/vue.js"></script>
    <script src="./elementui/index.js" type="module"></script>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="./elementui/theme-chalk/index.css">
    <script src="//unpkg.com/element-ui@2.15.13/lib/index.js" ></script>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="新增页面">
    </el-page-header>
    <el-alert v-if="showSuccessAlert" title="操作提示：" type="success" show-icon @close="showSuccessAlert = false">
        添加成功！
    </el-alert>
    <el-alert v-if="showErrorAlert" title="操作提示：" type="error" description="添加失败" show-icon @close="showSuccessAlert = false">
    </el-alert>

    <el-form :model="form" :rules="rules" ref="form" label-width="80px" style="width: 500px;margin: 0 auto;margin-top: 100px">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="角色身份" prop="role">
            <el-select v-model="form.role">
                <el-option
                        v-for="item in SelectOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            SelectOptions: [{
                value: '管理员',
                label: '管理员'
            }, {
                value: '超级管理员',
                label: '超级管理员'
            }],
            form: {
                username: '',
                password: '',
                email: '',
                phone: '',
                name: '',
                role: ''
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'},
                    {validator: function (rule, value, callback) {
                            $.ajax({
                                url: 'Admins_AccountsServlet?tag=CheckUname',
                                type: 'post',
                                data: {username: value},
                                success: function (data) {
                                    if (data=='true') {
                                        callback();
                                    } else {
                                        callback(new Error('用户名已存在'));
                                    }
                                }
                            })
                        }, trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '请输入邮箱', trigger: 'blur'},
                    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                ],
                phone: [
                    {required: true, message: '请输入手机号', trigger: 'blur'},
                    {type: 'string', min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur'},
                    {validator: function (rule, value, callback) {
                            $.ajax({
                                url: 'Admins_AccountsServlet?tag=CheckPhone2',
                                type: 'post',
                                data: {phone: value},
                                success: function (data) {
                                    if (data=='false') {
                                        callback(new Error('手机号已存在'));
                                    } else {
                                        callback();
                                    }
                                }
                            })
                        }, trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                role: [
                    {required: true, message: '请选择角色身份', trigger: 'change'},
                ]
            },
            showSuccessAlert: false,
            showErrorAlert: false
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: 'Admins_AccountsServlet?tag=Add',
                            type: 'post',
                            data: this.form,
                            success: function (data) {
                                if (data) {
                                    app.showSuccessAlert = true; // 显示成功提示框
                                } else {
                                    app.showErrorAlert = true;
                                }
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            goBack() {
                parent.vue.iframeUrl = 'Admin.jsp';
            }
        }
    });
</script>
</html>
